<template>
  <div>
    <img :src="blobUrl" :alt="alt" :width="width" :height="height" @load="loaded">
  </div>
</template>

<script>
export default {
  props: {
    src: {
      type: String,
      default: undefined
    },
    alt: {
      type: String,
      default: 'qrcode'
    },
    width: {
      type: [Number, String],
      default: 100
    },
    height: {
      type: [Number, String],
      default: 100
    }
  },
  data() {
    return {
      blobUrl: null
    }
  },
  watch: {
    src: {
      immediate: true,
      handler(src) {
        if (!src) return
        this.blobUrl = window.URL.createObjectURL(src)
      }
    }
  },
  methods: {
    loaded() {
      if (this.blobUrl) URL.revokeObjectURL(this.blobUrl)
    }
  }
}
</script>
